<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #message-container {
            border: 1px solid #ccc;
            height: 300px;
            overflow-y: scroll;
            padding: 10px;
            margin-bottom: 10px;
        }
        .message {
            margin-bottom: 10px;
            padding: 5px;
            border-radius: 5px;
        }
        .user-message {
            background-color: #e6f7ff;
            text-align: right;
        }
        .server-message {
            background-color: #f0f0f0;
        }
        input, button {
            padding: 8px;
            margin: 5px 0;
        }
        button {
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
        }
    </style>
</head>
<body>
<h1>WebSocket 聊天演示</h1>
<div id="message-container"></div>
<div>
    <input type="text" id="name" placeholder="您的名字">
    <input type="text" id="message" placeholder="输入消息">
    <button onclick="sendMessage()">发送</button>
    <button onclick="connect()">连接</button>
    <button onclick="disconnect()">断开连接</button>
</div>

<script>
    let stompClient = null;

    function connect() {
        const socket = new SockJS('/WebSocket');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function(frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe('/topic/messages', function(messageOutput) {
                showMessage(JSON.parse(messageOutput.body));
            });
        });
    }

    function disconnect() {
        if(stompClient !== null) {
            stompClient.disconnect();
        }
        console.log("Disconnected");
    }

    function sendMessage() {
        const name = document.getElementById('name').value;
        const message = document.getElementById('message').value;

        if(name && message) {
            stompClient.send("/app/chat", {},
                JSON.stringify({'from': name, 'text': message}));
            document.getElementById('message').value = '';
        }
    }

    function showMessage(message) {
        const messageContainer = document.getElementById('message-container');

        // 用户消息
        const userMessageDiv = document.createElement('div');
        userMessageDiv.className = 'message user-message';
        userMessageDiv.innerHTML = `<strong>${message.from}:</strong> ${message.text}`;
        messageContainer.appendChild(userMessageDiv);

        // 服务器响应
        const serverMessageDiv = document.createElement('div');
        serverMessageDiv.className = 'message server-message';
        serverMessageDiv.innerHTML = `<strong>${message.response}</strong>`;
        messageContainer.appendChild(serverMessageDiv);

        // 自动滚动到底部
        messageContainer.scrollTop = messageContainer.scrollHeight;
    }

    // 页面加载时自动连接
    window.onload = function() {
        connect();
    };
</script>
</body>
</html>